import type { QInputProps, QSelectProps, QSelectOption, ValidationRule } from 'quasar'
import type { StyleValue } from 'vue'

// 定义支持的表单项类型
export type FormItemType = 'input' | 'select' | 'date'

// 定义包含QueryForm内部需手动绑定的props
type manuallyHandleProps = 'modelValue' | 'label' | 'rules'

// 用于自定义我们手动添加的通用属性
interface CommonComponentProps {
  // 配合unocss
  class?: string | Record<string, boolean> | (string | Record<string, boolean>)[]
  style?: StyleValue
}

// 1. 创建一个基础的Schema接口，包含所有类型的共同属性
interface BaseFormSchema {
  // 表单项唯一标识， 用于v-model
  field: string
  // 表单项的标签
  label: string
  // 表单项类型
  type: FormItemType
  // Quasar 的验证规则数组
  rules?: ValidationRule[]
  // 占位提示符
  placeholder?: string
  // 针对'select' 类型的选项
  // 控制栅格布局， 值 1-12
  col?: number
}

// 2. 为每种表单项类型创建具体的Schema接口
// 它们继承自BaseFormSchema, 并精确定义了componentProps 和其他特定属性

// 输入框 Schema
export interface InputSchema extends BaseFormSchema {
  type: 'input'
  defaultValue?: string | number | null
  componentProps?: Omit<QInputProps, manuallyHandleProps> & CommonComponentProps
}

// 选择框 Schema

export interface SelectSchema extends BaseFormSchema {
  type: 'select'
  defaultValue?: string | number | null | any[]
  options: QSelectOption[]
  componentProps?: Omit<QSelectProps, manuallyHandleProps> & CommonComponentProps
}

// 日期选择器 Schema， 主要用QInput 包装，依然使用QInput

export interface DateSchema extends BaseFormSchema {
  type: 'date'
  defaultValue?: string | null
  // 简化了date, 直接使用了QInput 包装
  componentProps?: Omit<QInputProps, manuallyHandleProps> & CommonComponentProps
}

// 3. 创建一个联合类型，最终在props中使用的类型
export type MiniFormSchema = InputSchema | SelectSchema | DateSchema
